<template>
	<view class="main">
		<scroll-view scroll-y="true" class="scroll" @scrolltolower="loadMore">
			<!-- 视频播放 -->
			<view class="video_wrap">
				<!-- 自动播放：autoplay -->
				<video
					class="video_play"
					:src="mvUrl"
					objectFit="cover"
					:poster="mvDetail.cover"
					:title="mvDetail.name?mvDetail.name:mvDetail.title + '-' + mvDetail.artistName?mvDetail.artistName:''"
					enable-progress-gesture
					controls
					enable-play-gesture
					autoplay
				></video>
			</view>
			<view class="context">
				<!-- 视频名称 -->
				<view class="video_info">
					<view class="video_name">
						<text>{{ mvDetail.name?mvDetail.name:mvDetail.title }}</text>
					</view>
					<view class="video_desc_icon">
						<text
							class="iconfont"
							:class="isOpen == false ? 'icon-sj-down-copy' : 'icon-shangsanjiao'"
							style="color:#868585;font-siz:20rpx;"
							@click="openOrCloseDesc"
						></text>
					</view>
				</view>
				<!-- 视频简介 -->
				<view class="video_desc" v-if="isOpen">
					<view>
						<text>{{ mvDetail.time }} 发布</text>
					</view>
					<view>
						<text>{{ mvDetail.desc?mvDetail.desc: mvDetail.description }}</text>
					</view>
				</view>
				<!-- 观看次数 -->
				<view class="video_watch_info">
					<view class="video_playCount">
						<text>{{ mvDetail.playCount ? mvDetail.playCount :mvDetail.praisedCount}}次观看</text>
					</view>
				</view>
				<!-- 菜单栏 -->
				<view class="video_menu">
					<view class="">
						<view class=""><text class="iconfont icon-dianzan1" style="font-size:60rpx;color:#242323"></text></view>
						<view class="video_menu_text">
							<text>{{ mvDetail.likeCount }}</text>
						</view>
					</view>
					<view class="">
						<view class=""><text class="iconfont icon-wenjianjia" style="font-size:60rpx;color:#242323"></text></view>
						<view class="video_menu_text">
							<text>{{ mvDetail.subCount }}</text>
						</view>
					</view>
					<view class="">
						<view class=""><text class="iconfont icon-pinglun" style="font-size:60rpx;color:#242323"></text></view>
						<view class="video_menu_text">
							<text>{{ mvDetail.commentCount }}</text>
						</view>
					</view>
					<view class="">
						<view class=""><text class="iconfont icon-fenxiang" style="font-size:60rpx;color:#242323"></text></view>
						<view class="video_menu_text">
							<text>{{ mvDetail.shareCount }}</text>
						</view>
					</view>
				</view>
				<!-- 歌手信息(无) -->
				<!-- 相关音乐（无） -->
				<!-- 相关视频 -->
				<view class="relatedAllvideo_title"><text class="">相关视频</text></view>
				<view class="relatedAllvideo" v-for="(item, index) in relatedAllvideo" :key="index" @click="openMv(item)">
					<view class="relatedAllvideo_img">
						<image mode="aspectFill" :src="item.coverUrl" />
						<view class="relatedAllvideo_playCount">
							<text class="iconfont icon-play" style="font-size:30rpx;"></text>
							<text>{{ item.playTime | playcount}}</text>
						</view>
					</view>
					<view class="relatedAllvideo_desc">
						<view class="relatedAllvideo_desc_title">
							<text id="mv" v-if="item.type == 5" class="iconfont icon-MV" style="font-size:40rpx;color:red"></text>
							<text>{{ item.title }}</text>
						</view>
						<view class="relatedAllvideo_desc_creator">
							<text decode="true">&nbsp;{{ item.creator[0].userName }}</text>
						</view>
					</view>
				</view>
				<!-- 精彩评论 -->
				<view v-if="hotComments.length" class="relatedAllvideo_title"><text class="comment_title">精彩评论</text></view>
				<!-- 评论主体 -->
				<view class="comment_wrap" v-for="(item, index) in hotComments" :key="index + '' + item.time">
					<!-- 左边头像 -->
					<view class="comment_left"><image :src="item.user.avatarUrl" /></view>
					<!-- 右边内容 -->
					<view class="comment_right">
						<!-- 名称及点赞 -->
						<view class="comment_info">
							<view class="comment_info_left">
								<view class="comment_name">{{ item.user.nickname }}</view>
								<view class="comment_time">{{ item.newtime }}</view>
							</view>
							<view class="comment_info_right">
								<text class="comment_dianzan">{{ item.likedCount }}</text>
								<text class="iconfont icon-dianzan1" style="font-size:48rpx;color:#b6b3b3"></text>
							</view>
						</view>
						<!-- 内容 -->
						<view class="comment_content">
							<!-- <text> -->
							<block v-for="(re, index2) in item.content" :key="re.time">
								<block v-if="re.node == 'text'">{{ re.text }}</block>
								<!-- <block v-else-if="re.node == 'element'"><image class="wxEmoji" :src="'http://s1.music.126.net/style/web2/emt//emoji_'+{{re.text}}+'.png'" /></block> -->
							</block>
							<!-- </text> -->
						</view>
						<!-- 回复无 -->
						<view></view>
						<!-- 分割线 -->
						<view class="xian"></view>
					</view>
				</view>
				<!-- 最新评论 -->
				<view class="relatedAllvideo_title">
					<text class="comment_title">最新评论</text>
					<text class="comment_total" decode="true">&nbsp;{{ total }}</text>
				</view>
				<view class="comment_wrap" v-for="(item, index) in comments" :key="item.time">
					<!-- 左边头像 -->
					<view class="comment_left"><image :src="item.user.avatarUrl" /></view>
					<!-- 右边内容 -->
					<view class="comment_right">
						<!-- 名称及点赞 -->
						<view class="comment_info">
							<view class="comment_info_left">
								<view class="comment_name">{{ item.user.nickname }}</view>
								<view class="comment_time">{{ item.newtime }}</view>
							</view>
							<view class="comment_info_right">
								<text class="comment_dianzan">{{ item.likedCount }}</text>
								<text class="iconfont icon-dianzan1" style="font-size:48rpx;color:#b6b3b3"></text>
							</view>
						</view>
						<!-- 内容 -->
						<view class="comment_content">
							<view class="">{{ item.content }}</view>
						</view>
						<!-- 回复 -->
						<view></view>
						<!-- 分割线 -->
						<view class="xian"></view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import { mvRequest } from '../../api/mv.js';
export default {
	data() {
		return {
			// 简介状态
			isOpen: false,
			// MV数据信息
			mvDetail: {},
			// MVUrl
			mvUrl: '',
			// 相关视频
			relatedAllvideo: [],
			// 精彩评论
			hotComments: [],
			// 最新评论
			comments: [],
			// 评论总数
			total: 0,
			// MVID
			mvId: 0,
			// 页数
			page: 2,
			// 0-mv、1-视频
			type: 0
		};
	},
	onLoad: function(options) {
		let id = options.id;
		let type = options.type;
		this.type = type;
		this.mvId = id;
		if (type == 5) {
			this.getMvUrl();
			this.getMvDetail();
			this.getRelatedAllvideo();
			this.getComments();
		} else {
			this.getVideoDetail();
			this.getVideoUrl();
			this.getRelatedAllvideo();
			this.getComments();
		}
		// this.getMvUrl();
		// this.getMvDetail();
		// this.getRelatedAllvideo();
		// this.getComments();
	},
	methods: {
		/**
		 * 获取MVUrl
		 */
		async getMvUrl(id) {
			let result = await mvRequest({
				url: '/mv/url',
				data: {
					id: this.mvId
				}
			});
			this.mvUrl = result[1].data.data.url;
		},
		/**
		 * 获取MV数据
		 */
		async getMvDetail(id) {
			let result = await mvRequest({
				url: '/mv/detail',
				data: {
					mvid: this.mvId
				}
			});
			this.mvDetail = result[1].data.data;
			this.mvDetail.time = this.formatTime(this.mvDetail.publishTime,1)
		},

		/**
		 * 获取video数据
		 */
		async getVideoDetail(id) {
			let result = await mvRequest({
				url: '/video/detail',
				data: {
					id: this.mvId
				}
			});
			this.mvDetail = result[1].data.data;
			this.mvDetail.time = this.formatTime(this.mvDetail.publishTime,1)
		},

		/**
		 * 获取videoUrl
		 */
		async getVideoUrl(id) {
			let result = await mvRequest({
				url: '/video/url',
				data: {
					id: this.mvId
				}
			});
			this.mvUrl = result[1].data.urls[0].url;
		},
		/**
		 * 获取相关视频
		 */
		async getRelatedAllvideo(id) {
			let result = await mvRequest({
				url: '/related/allvideo',
				data: {
					id: this.mvId
				}
			});
			this.relatedAllvideo = result[1].data.data;
		},
		/**
		 * 获取评论
		 */
		async getComments() {
			var data=""
			if(this.type==5){
				let result = await mvRequest({
					url: '/comment/mv',
					data: {
						id: this.mvId
					}
				});
				// 日期需要转换
				 data= result[1].data;
			}else{
				let result = await mvRequest({
					url: '/comment/video',
					data: {
						id: this.mvId
					}
				});
				// 日期需要转换
				data= result[1].data;
			}

			for (let i in data.hotComments) {
				data.hotComments[i].newtime = this.formatTime(data.hotComments[i].time, 1);
			}
			for (let i in data.comments) {
				data.comments[i].newtime = this.formatTime(data.comments[i].time, 1);
			}
			this.hotComments.push(...data.hotComments);
			this.comments.push(...data.comments);
			this.total = data.total;
		},
		// 时间处理
		formatTime(date, type) {
			type = type || 1;
			//type 1,完成输出年月日时分秒，2对比当前时间输出日期，或时分;
			var d = new Date(date);
			var year = d.getFullYear();
			var month = d.getMonth() + 1;
			var day = d.getDate();
			var hour = d.getHours();
			var minute = d.getMinutes();
			var second = d.getSeconds();
			if (type == 1) {
				return [year, month, day].map(this.formatNumber).join('/') + ' ' + [hour, minute, second].map(this.formatNumber).join(':');
			} else if (type == 3) {
				return [year, month, day].map(this.formatNumber).join('-');
			} else {
				var jm = new Date(),
					Fo = jm.getTime() - date;
				if (Fo <= 6e4) return '刚刚';
				var Qq = jm.getHours() * 36e5 + jm.getMinutes() * 6e4 + jm.getSeconds() * 1e3;
				if (day == jm.getDate()) {
					if (Fo < 36e5) {
						var bOh = Math.floor(Fo / 6e4);
						return bOh + '分钟前';
					}
					return [hour, minute].map(this.formatNumber).join(':');
				} else {
					if (Fo < Qq + 864e5) {
						return '昨天' + [hour, minute].map(this.formatNumber).join(':');
					} else {
						var hq = jm.getFullYear(),
							bOg = new Date(hq, 0, 1);
						var Qq = jm.getTime() - bOg.getTime();
						if (Fo < Qq) {
							return year + '年' + month + '月' + day + '日' + [hour, minute].map(this.formatNumber).join(':');
						}
						return year + '年' + month + '月' + day + '日';
					}
				}
			}
		},
		formatNumber(n) {
			n = n.toString();
			return n[1] ? n : '0' + n;
		},
		/**
		 * 加载更多评论
		 */
		async loadMore() {
			this.page = this.page + 1;
			let result = await mvRequest({
				url: '/comment/mv',
				data: {
					id: this.mvId,
					offset: (this.page - 1) * 20
				}
			});
			// 日期需要转换
			var data = result[1].data;
			for (let i in data.comments) {
				data.comments[i].newtime = this.formatTime(data.comments[i].time, 1);
			}
			this.comments.push(...data.comments);
		},

		// 查看或关闭简介
		openOrCloseDesc: function(e) {
			var isOpen = this.isOpen;
			if (isOpen) {
				isOpen = false;
			} else {
				isOpen = true;
			}
			this.isOpen = isOpen;
		},
		/**
		 * 打开MV
		 */
		openMv: function(item) {
			wx.redirectTo({
				url: '/pages/mv/mv?id=' + item.vid + '&type=' + item.type
			});
		}
	}
};
</script>

<style lang="scss" scoped>
/* pages/mv/mv.wxss */

.main {
	width: 100%;
	height: 100vh;
}
.scroll {
	height: 100vh;
}
.video_wrap {
	width: 100%;
}

.context {
	width: 100%;
}

.video_wrap video {
	width: 100%;
	height: 400rpx;
}

.video_info {
	display: flex;
	justify-content: space-between;
	/* border: 1px solid black; */
	padding: 25rpx 40rpx;
}

.video_name text {
	font-size: 35rpx;
	font-weight: 600;
}

.video_desc {
	width: 90%;
	padding: 0rpx 40rpx;
	padding-bottom: 25rpx;
	/* border: 1px solid black; */
}

.video_desc text {
	font-size: 30rpx;
	color: #868585;
	word-break: keep-all;
	word-wrap: break-word;
}

.video_watch_info {
	display: flex;
	justify-content: flex-start;
	/* border: 1px solid black; */
	padding: 0rpx 40rpx;
}

.video_playCount text {
	font-size: 30rpx;
	color: #868585;
}

.video_Label {
	/* display: block; */
	margin-left: 30rpx;
	margin-top: 6rpx;
	width: 90rpx;
	height: 50rpx;
	/* border: 1px solid #cccccc; */
	background-color: #e0dddd;
	text-align: center;
	border-radius: 25rpx;
	line-height: 40rpx;
}

.video_Label text {
	font-size: 30rpx;
	color: #242323;
}

.video_menu {
	/* border: 1px solid #cccccc; */
	/* width: 100%; */
	display: flex;
	justify-content: space-between;
	text-align: center;
	margin: 0rpx 60rpx;
	margin-top: 60rpx;
}

.video_menu_text {
	font-size: 25rpx;
	color: #868585;
}

.relatedAllvideo_title {
	margin-left: 40rpx;
	margin-top: 40rpx;
}

.relatedAllvideo_title comment_title {
	font-size: 35rpx;
	font-weight: 600;
}

.relatedAllvideo {
	margin-top: 30rpx;
	/* border: 1px solid #cccccc; */
	display: flex;
	justify-content: flex-start;
	align-items: center;
	margin-left: 40rpx;
	margin-right: 40rpx;
}

.relatedAllvideo_img {
	position: relative;
}

.relatedAllvideo_img image {
	width: 280rpx;
	height: 160rpx;
	border-radius: 5%;
}

.relatedAllvideo_playCount {
	position: absolute;
	top: 5rpx;
	right: 5rpx;
	width: 100%;
	display: flex;
	justify-content: flex-end;
	color: #fff;
	font-size: 24rpx;
}

.relatedAllvideo_desc {
	width: 55%;
	margin-left: 20rpx;
	/* margin-right: 20rpx; */
	line-height: 40rpx;
	/* border: 1px solid #cccccc; */
}

.relatedAllvideo_desc_title {
	font-size: 30rpx;
	/* 两行省略 */
	display: -webkit-box;
	overflow: hidden;
	white-space: normal;
	text-overflow: ellipsis;
	word-wrap: break-word;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

#mv {
	/* display: block; */
	margin-right: 10rpx;
}

.relatedAllvideo_desc_creator {
	font-size: 25rpx;
	color: #a3a0a0;
	text-align: justify;
	margin-top: 10rpx;
}

.comment_wrap {
	display: flex;
	justify-content: space-between;
	/* border: 1px solid #cccccc; */
	margin-left: 40rpx;
	margin-right: 40rpx;
	margin-top: 40rpx;
}

.comment_info {
	display: flex;
	justify-content: space-between;
}

.comment_left {
	width: 10%;
	margin-right: 25rpx;
}

.comment_left image {
	width: 70rpx;
	height: 70rpx;
	border-radius: 50%;
}

.comment_right {
	width: 90%;
}

.comment_name {
	font-size: 30rpx;
	color: rgb(155, 153, 153);
}

.comment_time {
	font-size: 22rpx;
	color: #b6b3b3;
}

.comment_dianzan {
	font-size: 30rpx;
	color: #b6b3b3;
	margin-right: 10rpx;
}

/* .comment_content {
    padding-bottom: 30rpx;
    border-bottom: 1rpx solid #ece8e8;
} */

.comment_content {
	font-size: 30rpx;
	padding-top: 30rpx;
}

.wxEmoji {
	vertical-align: middle;
	width: 42rpx;
	height: 42rpx;
	margin: 0 3rpx;
}

.xian {
	width: 100%;
	height: 30rpx;
	border-bottom: 1rpx solid #ece8e8;
}

.comment_total {
	font-size: 30rpx;
	color: #b6b3b3;
}
</style>
